import React, { useState, useEffect } from 'react'
import { Link, Route, Switch } from 'react-router-dom'
import {Breadcrumb, Tabs,Input, Select, DatePicker, Space, Button, Row, Col, Table, Modal} from "antd"
import { SearchOutlined, CloudUploadOutlined } from '@ant-design/icons';
import locale from 'antd/es/date-picker/locale/zh_CN';
import style from './index.module.scss'
import { useSelector,useDispatch } from 'react-redux'
import {getBeforeCreditAsyncAction} from "../../../store/LoaningStore/action"


const { TabPane } = Tabs;
const { Option } = Select
const { RangePicker } = DatePicker;
export default function Chuli(props) {
    //分页
    const [pageAndSize,setPageAndSize] = useState({
        currentPage:1,
        pageSize:10
    })
    const dispatch = useDispatch()
    const list = useSelector(state => state.daiZhongList)
    const [data,setData] = useState([]) 

    //搜索字段
    const [name, setName] = useState('')
    const [phoneNumber, setPhoneNumber] = useState('')
    const [type, setType] = useState('')
    const [startDate, setStartDate] = useState('')
    const [endDate, setEndDate] = useState('')
    const [loanState,setLoanState] = useState([2,5])

    

    
    // 分页请求
    useEffect(() => {
        setData([])
    dispatch(getBeforeCreditAsyncAction({
        ...pageAndSize,
        data:{
            customer_name:name,
            customer_phone:phoneNumber,
            loan_type:type,
            application_startDate:startDate,
            application_endDate:endDate,
            loan_state: loanState
        }
    }))
    }, [pageAndSize,loanState])

    useEffect(() => {
        setData([])
        console.log(list);
          if(list.list.length>0){
                let arr = []
               list.list.forEach(item=>{
                  let  obj={
                       id:item.loan_id,
                       name:item.customer.name,
                       shengqi_data:item.application_date,
                       phonenumber:item.customer.phone,
                       shengqingedu:item.applied_amount,
                       back_type:item.reimbursement_means,
                       time_longer:item.time_limit,
                       load_type:item.load_type?item.load_type:"-",
                       shenpiedu:item.approval_amount,
                       statu:"",
                       chusheng:item.auditList[0].user.user_name,
                       fushen:item.auditList[1].user.user_name,
                       zhongshen:item.auditList[2]?item.auditList[2].user.user_name:"-"
                   }
                   arr.push(obj)
                   
               })
               console.log(arr);
            setData(arr)
                
           }
        
    
    },[list])
    // useEffect(() => {
    //     setData([{
    //         id:1001,
    //         name:"老朱",
    //         shengqi_data:"2018-12-15 14:36:18",
    //         phonenumber:"13888888888",
    //         shengqingedu:"500000",
    //         back_type:"等本等息",
    //         time_longer:"12",
    //         load_type:"个人信用",
    //         shenpiedu:"48000",
    //         chusheng:"陈某某",
    //         fushen:"陈某某",
    //         zhongshen:"-"
    //     }])
    // }, [])
    
    const columns = [
        {
            title: '借款编号',
            dataIndex: 'id',
        },
        {
            title: '姓名',
            dataIndex: 'name',
        },
        {
            title: '申请日期',
            dataIndex: 'shengqi_data',
        },
        {
            title: '手机号',
            dataIndex: 'phonenumber',
        },
        {
            title: '申请额度',
            dataIndex: 'shengqingedu',
        },
        {
            title: '还款方式',
            dataIndex: 'back_type',
        },
        {
            title: '借款期限',
            dataIndex: 'time_longer',
        },
        {
            title: '贷款类型',
            dataIndex: 'load_type',
        },
        {
            title: '审批金额',
            dataIndex: 'shenpiedu',
        },
        {
            title: '状态',
            dataIndex: 'statu',
            render:()=>{
                return (
                    <div className={style.td}>
                    <span>复审通过</span>
                    <Route>
                        <Link onClick={showModal}>审核信息</Link>
                    </Route>
                    </div>
                )
            }
        },
        {
            title: '初审',
            dataIndex: 'chusheng',
        },
        {
            title: '复审',
            dataIndex: 'fushen',
        },
        {
            title: '终审',
            dataIndex: 'zhongshen',
        },
        {
            title: '操作',
            dataIndex: 'action',
            render: (text,record) =><Link onClick={()=>look(record.id)}>查看</Link>
        },
    ];

     const look = (id)=>{
        console.log(id);
        props.history.push('/home/zhongshen?'+id)
    }
    //tab切换
    const callback = (key) => {
        if(key==='1'){
            setLoanState([2,5])
            setPageAndSize({
                currentPage:1,
                pageSize:10
            })
        }else if(key==='2'){
            setLoanState([3])
            setPageAndSize({
                currentPage:1,
                pageSize:10
            })
        }else if(key==='3'){
            setLoanState([8])
            setPageAndSize({
                currentPage:1,
                pageSize:10
            })
        }
    }
        
    
    //获取分页
    const getPage = (page, pageSize) => {
        console.log(page, pageSize)
        setPageAndSize({
            currentPage:page,
            pageSize
        })
    }
    
    //搜索
    const onChangetype = (value) => {
        setType(value)
    }
    const onChangetime1 = (date, dateString) => {
        console.log('日期获取', date, dateString);
        setStartDate(dateString[0]+" 00:00:00")
        setEndDate(dateString[1]+" 23:59:59")
    }
    const onChangeName = (e) => {
        setName(e.target.value)
    }
    const onChangePhone = (e) => {
        setPhoneNumber(e.target.value)
    }
    const search = ()=>{
        dispatch(getBeforeCreditAsyncAction({
            ...pageAndSize,
            data:{
                customer_name:name,
                customer_phone:phoneNumber,
                loan_type:type,
                application_startDate:startDate,
                application_endDate:endDate,
                loan_state: loanState
            }
        }))
    }

    

    //模态框
    const [isModalVisible, setIsModalVisible] = useState(false);
    
    const showModal = () => {
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        <div className={style.box}>
            <Modal title="审核详情" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} centered>
                <Row className='row'>
                    <Col span={4}><span className={style.p}>审核时间</span></Col>
                    <Col span={4}><span className={style.p}>状态</span></Col>
                    <Col span={4}><span className={style.p}>审核人员</span></Col>
                    <Col span={4}><span className={style.p}>审核结果</span></Col>
                    <Col span={8}><span className={style.p}>反馈详情</span></Col>
                </Row>
                <Row className='row'>
                    <Col span={4}><span className={style.xinxi}>2018-07-06 16:58:11</span></Col>
                    <Col span={4}><span className={style.xinxi}>终审</span></Col>
                    <Col span={4}><span className={style.xinxi}>邓某某</span></Col>
                    <Col span={4}><span className={style.xinxi}>审核通过</span></Col>
                    <Col span={8}><span className={style.xinxi}>请安排放款
                    【放款额度】合同金额48000元，期限36期，综合利率1.0%</span></Col>
                </Row>
                <Row className='row'>
                    <Col span={4}><span className={style.xinxi}>2018-07-06 16:58:11</span></Col>
                    <Col span={4}><span className={style.xinxi}>终审</span></Col>
                    <Col span={4}><span className={style.xinxi}>邓某某</span></Col>
                    <Col span={4}><span className={style.xinxi}>审核通过</span></Col>
                    <Col span={8}><span className={style.xinxi}>请安排放款
                    【放款额度】合同金额48000元，期限36期，综合利率1.0%</span></Col>
                </Row>
            </Modal>
            <Breadcrumb style={{ margin: '16px 0',display:"flex",justifyContent:"start"}}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>贷中管理</Breadcrumb.Item>
                <Breadcrumb.Item>产品授信</Breadcrumb.Item>
            </Breadcrumb>
            <Tabs defaultActiveKey="1" onChange={callback} className='tabs'>
            <TabPane tab="未受理" key="1">
            <div>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Input placeholder="姓名" onChange={onChangeName} />
                    </div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Input placeholder="手机号" onChange={onChangePhone} />
                    </div>
                    </Col>
                    <Col className="gutter-row" span={2}>
                    <div>
                        <Select
                        showSearch
                        placeholder="贷款类型"
                        optionFilterProp="children"
                        onChange={onChangetype}
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        >
                        <Option value="个人信用">个人信用</Option>
                        </Select>
                    </div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Space direction="vertical" size={12}>
                        <RangePicker locale={locale} onChange={onChangetime1} />
                        </Space>
                    </div>
                    </Col>
                    <Col className="gutter-row" span={4}>
                    <div>
                        <Button icon={<SearchOutlined />} type='button' onClick={search}>
                        查询
                        </Button>
                    </div>
                    </Col>
                </Row>
                <div className={style.title}>
                    <p className={style.list}>数据列表</p>
                    <Button className='button'><CloudUploadOutlined className="icon" />导出</Button>
                </div>
                <Table columns={columns} dataSource={data} pagination={{
                        total: list.count,
                        showQuickJumper: true,
                        showSizeChanger: true,
                        pageSizeOptions: ['1', '20', '30'],
                        showTotal: total => `共${Math.ceil(total / pageAndSize.pageSize)}页/ ${total} 条数据`,
                        onChange: getPage
                    }}
                        // onRow={record => {
                        //     return {
                        //         onClick: () => {props.history.push('/zhongshen?'+record.id)}
                        //     }
                        // }}
                    />
            </div>  
            
            </TabPane>
            <TabPane tab="已通过" key="2">
            
            <div>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Input placeholder="姓名" onChange={onChangeName} />
                    </div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Input placeholder="手机号" onChange={onChangePhone} />
                    </div>
                    </Col>
                    <Col className="gutter-row" span={2}>
                    <div>
                        <Select
                        showSearch
                        placeholder="贷款类型"
                        optionFilterProp="children"
                        onChange={onChangetype}
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        >
                        <Option value="个人信用">个人信用</Option>
                        </Select>
                    </div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Space direction="vertical" size={12}>
                        <RangePicker locale={locale} onChange={onChangetime1} />
                        </Space>
                    </div>
                    </Col>
                    <Col className="gutter-row" span={4}>
                    <div>
                        <Button icon={<SearchOutlined />} type='button' >
                        查询
                        </Button>
                    </div>
                    </Col>
                </Row>
                <div className={style.title}>
                    <p className={style.list}>数据列表</p>
                    <Button className={style.button}><CloudUploadOutlined className="icon" />导出</Button>
                </div>
                    <Table  columns={columns} dataSource={data} pagination={{
                            total: list.count,
                            showQuickJumper: true,
                            showSizeChanger: true,
                            pageSizeOptions: ['10', '20', '30'],
                            showTotal: total => `共${Math.ceil(total / pageAndSize.pageSize)}页/ ${total} 条数据`,
                            onChange: getPage
                        }}
                            // onRow={record => {
                            //     return {
                            //         onClick: event => { props.history.push('/zhongshen?'+record.id) },
                            //     }
                            // }}
                        />
                </div>   
            </TabPane>
            <TabPane tab="已终止" key="3">
            
            <div>
                <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Input placeholder="姓名" onChange={onChangeName} />
                    </div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Input placeholder="手机号" onChange={onChangePhone} />
                    </div>
                    </Col>
                    <Col className="gutter-row" span={2}>
                    <div>
                        <Select
                        showSearch
                        placeholder="贷款类型"
                        optionFilterProp="children"
                        onChange={onChangetype}
                        filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                        >
                        <Option value="个人信用">个人信用</Option>
                        </Select>
                    </div>
                    </Col>
                    <Col className="gutter-row" span={6}>
                    <div>
                        <Space direction="vertical" size={12}>
                        <RangePicker locale={locale} onChange={onChangetime1} />
                        </Space>
                    </div>
                    </Col>
                    <Col className="gutter-row" span={4}>
                    <div>
                        <Button icon={<SearchOutlined />} type='button' >
                        查询
                        </Button>
                    </div>
                    </Col>
                </Row>
                <div className={style.title}>
                    <p className={style.list}>数据列表</p>
                    <Button className={style.button}><CloudUploadOutlined className="icon" />导出</Button>
                </div>
                    <Table  columns={columns} dataSource={data} pagination={{
                            total: list.count,
                            showQuickJumper: true,
                            showSizeChanger: true,
                            pageSizeOptions: ['10', '20', '30'],
                            showTotal: total => `共${Math.ceil(total / pageAndSize.pageSize)}页/ ${total} 条数据`,
                            onChange: getPage
                        }}
                            // onRow={record => {
                            //     return {
                            //         onClick: event => { props.history.push('/zhongshen?'+record.id)},
                            //     }
                            // }}
                        />
                </div>   
            </TabPane>
        </Tabs>
        </div>
        
    )
}
